<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" session="false"%>
<%@ include file="/WEB-INF/view/common/loginCheck.jspf" %>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'center'" style="padding:5px">
    	<table id="prodSelectionDataListFromDlg" style="width:98%"></table>
		<div id="prodSelectionDataListToolbarFromDlg">
			<div style="padding:10px;">
				状态：<select class="easyui-combobox" id="stateSelectBoxFromDlg">
				 	<option value="">--选择状态--</option>
				 	<option value="1">启用</option>
                	<option value="0">草稿</option>
                	<option value="-1">停用</option>
                	<option value="-2">删除</option>
				</select>
				品类：<input id="cateSelectBoxFromDlg" style="width:150px;" name="cate" value="" />
				<input class="easyui-searchbox" id="prodSelectionDataListSearchBoxFromDlg" data-options="prompt:'产品名字或者型号', searcher:searchProdSelectionFromDlg" style="width:30%" />
			</div>
			<div>
			    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" plain="true" title="双击记录行也可以哦^_^" onclick="pickProdFromListFromDlg()">选择产品</a>
		    </div>
		</div>
    </div>
</div>
<script type="text/javascript">
	var state = null;
	var cateId = null;
	$(function () {
		$('#stateSelectBoxFromDlg').combobox({
		    onSelect: function (node) {
		    	state = node.value;
		    	searchProdSelectionFromDlg();
		    }
		});
		$('#cateSelectBoxFromDlg').combobox({
			url:'${ROOT}/productCate/listAll?_rt=' + new Date().getTime(),
		    valueField:'id',
		    textField:'name',
		    onSelect: function (node) {
		    	cateId = node.id;
		    	searchProdSelectionFromDlg();
		    }
		});
		
		$('#prodSelectionDataListFromDlg').datagrid({
		    url:'${ROOT}/product/listProductSku?_rt=' + new Date().getTime(),
		    columns:[[
				{field: 'id', width: '40', checkbox: true, align: 'left'},
				{field: 'pathSl', width: '55', title: '图片', align: 'left', formatter:function(value, row, index) {
					return '<img width="50px" height="50px" src="<%=SysPropCacheManager.getPropValue("oss.imageAccessUrl")%>/' + value + '" />';
				}},
		        {field: 'name', title: '名称', width: '250', align: 'left'},
		        {field: 'color', title: '颜色', width: '80', align: 'left'},
		        {field: 'taste', title: '口味', width: '80', align: 'left'},
		        {field: 'unit', title: '单位', width: '80', align: 'left'},
		        {field: 'unitPrice', title: '单价(元)', width: '60', align: 'right'},
		        {field: 'state', title: '状态', width: '50', align: 'center',
		        	formatter:function(value, row, index) {
		        		var color = 'green';
		        		var name = '启用';
		        		var style = '';
		        		if (value == 0) {
		        			color = 'gray';
		        			name = '草稿';
		        		} else if (value == -1 || value == -2) {
		        			color = 'red';
		        			name = value == -1 ? '停用' : '删除';
		        			if (value == -2) {
		        				style = 'text-decoration:line-through;';
		        			}
		        		}
			        	return '<font color="' + color + '"><b style="' + style + '">' + name + '</b></font>';		        			
		            }
		        },
		        {field: 'updatedTime', title: '更新时间', width: '130', align: 'left'}
		    ]],
		    idField: 'id',
		    toolbar: '#prodSelectionDataListToolbarFromDlg',
	    	rownumbers: true,
	    	pagination: true,
	    	pageSize: 20,
	    	singleSelect: true,
	    	checkOnSelect: true,
	    	scrollbarSize: 12,
	    	onDblClickRow: function (index, row) {
	    		$('#selectedProdIdFromDlg').val(row.id);
	    		$('#selectedProdNameFromDlg').textbox('setText', row.name + '[' + row.color + '][' + row.taste + ']');
	    		$('#prodSelectionFromDlg').dialog('close');
	    	}
		});
	});
	
	function searchProdSelectionFromDlg() {
		$('#prodSelectionDataListFromDlg').datagrid('load', {
			keyword: $.trim($('#prodSelectionDataListSearchBoxFromDlg').searchbox('getValue')),
    		cateId: cateId,
    		state: state
    	});
		$('#prodSelectionDataListFromDlg').datagrid('clearSelections');
    	$('#prodSelectionDataListFromDlg').datagrid('clearChecked');
	}
	
	function pickProdFromListFromDlg() {
		var selectedRows = $('#prodSelectionDataListFromDlg').datagrid('getSelections');
		if (selectedRows == null ||selectedRows.length <= 0) {
			APP.warning('请选择要一个产品');
			return;
		}
		$('#selectedProdIdFromDlg').val(selectedRows[0].id);
		$('#selectedProdNameFromDlg').textbox('setText', selectedRows[0].name + '[' + selectedRows[0].color + '][' + selectedRows[0].taste + ']');
		$('#prodSelectionFromDlg').dialog('close');
	}
</script>